<template>
	<view class="coupon-box">
		<!-- 我的优惠券 -->
		<!-- 	<view class="">
			<u-button type="primary" text="同步优惠券" @click="synClick"></u-button>
		</view> -->
		<view class="share-cicle" @click="shareClick" v-if="shareShow&&isMyself">
			<text>一键分享</text>
		</view>
		<view class="add-cicle" @click="synClick" v-if="shareDisabled&&isMyself">
			<text>领券</text>
		</view>
		<!-- 顶部tab切换 -->
		<view class="">
			<u-tabs :list="statusMenuLists" @click="statusMenuClick"></u-tabs>
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view class="list-box" v-for="(item,index) in listInfo" :key="index" @tap="checkCoupon(index,item)">
				<view class="coupon-pick">
					<u-icon name="checkmark-circle" color="#ff2819" size="50" v-if="item.bOn"></u-icon>
				</view>
				<view class="list-left-top">
					{{item.couponTypeValue}}
				</view>
				<view class="list-top">
					<view class="list-top-left">
						<view class="list-name">
							{{item.couponName}}
						</view>
						<view class="list-date">
							有效期至{{item.effectiveEnd}}
						</view>
					</view>
					<view class="list-top-right">
						<view class="list-money">
							¥ <text>{{item.publishValue}}</text>
						</view>
						<view class="list-condition">
							{{item.couponContent}}
						</view>
					</view>
				</view>
				<view class="list-btm">
					<view class="list-explain">
						<u-collapse @change="change" @close="close" @open="open">
							<u-collapse-item title="适用规则" name="Docs guide">
								<text class="u-collapse-content">{{item.description}}</text>
							</u-collapse-item>
						</u-collapse>
					</view>
					<view class="list-share">
						<u-button type="primary" size="mini" color="linear-gradient(90deg, #ff9c11 0%, #ff2819 100%)"
							text="去分享" @tap.stop="toShare(item,index)" v-if="shareDisabled"></u-button>
						<u-button type="primary" size="mini" color="linear-gradient(90deg, #ff9c11 0%, #ff2819 100%)"
							text="去使用" @tap.stop="toUse(item,index)" v-if="!shareStatus&&toUse"></u-button>
					</view>
				</view>

			</view>
		</view>


		<u-popup :show="popShow" mode="center" class="pop-show">
			<view class="pop-box">
				<u--form labelPosition="left" :model="userInfos" labelWidth="100" :rules="rules" ref="form1">
					<u-form-item label="账号" prop="name" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.name" clearable border="none" placeholder='请输入账号'></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.password" type='password' clearable border="none"
							placeholder='请输入密码'></u--input>
					</u-form-item>
				</u--form>
				<view class="pop-submit">
					<view class="pop-confirm">
						<u-button @click="synSubmit" type="primary">确认</u-button>
					</view>
					<view class="pop-cancle">
						<u-button @click="popShow=false" type="error">取消</u-button>
					</view>


				</view>
			</view>
		</u-popup>

		<u-popup :show="shareBottom" mode="bottom" @close="shareClose">
			<view class="share-bottom">
				<view class="share-bottom-box">
					<view class="share-bottom-wrap">
						<view class="share-bottom-img-box share-bottom-img-box1">
							<img src="https://file.casugn.com/storecompcard//40JbY2nn1Yee0003816de3c71e1e6473f8b7d01b0ccf_1658829712018.png"
								alt="">
						</view>
						<view class="share-bottom-text">
							好友
						</view>
					</view>
				</view>
				<view class="share-bottom-box">
					<view class="share-bottom-wrap" @click="shareToCard">
						<view class="share-bottom-img-box share-bottom-img-box2">
							<img src="https://file.casugn.com/storecompcard//vs96iavFqbma23f173f64506cae24eeb49de67bbdc3b_1658829742783.png"
								alt="">
						</view>
						<view class="share-bottom-text">
							卡片
						</view>
					</view>
				</view>
				<view class="share-bottom-box">
					<view class="share-bottom-wrap">


						<view class="share-bottom-text">

							<button openType="share" class="shareBtn">
								<view class="share-bottom-img-box share-bottom-img-box3">
									<img src="https://file.casugn.com/storecompcard//QSDskyI2jhEt33e5e495cefaf2ee85a8415d3a047ff6_1658829757449.png"
										alt="">
								</view>
								<view class="">
									微信
								</view>
							</button>
						</view>

					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			...mapState(['userInfo', 'otherUserInfo', 'isSelf']),
		},
		data() {
			return {

				userInfos: {
					name: '',
					password: '',
				},

				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				unionId: '',
				openId: '',
				statusMenuLists: [{
					name: '未使用',
					id: 1,
				}, {
					name: '已使用',
					id: 2,
				}, {
					name: '已失效',
					id: 3,
				}, ],
				typeValue: '1',
				listInfo: [],
				popShow: false,
				selectAllCouponCode: [],
				shareShow: false,
				shareBottom: false,
				shareDisabled: true,
				shareStatus: false,
				toUse: false, //去使用
				isMyself: false
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		// onLoad(options){
		// 	console.log("这是")
		// 	console.log(options)
		// 	console.log("这是")
		// },
		onShow(options) {
			this.isMyself = this.$store.state.isSelf
			if (this.isMyself) {
				this.toUse = false
			} else {
				this.toUse = true
			}
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			this.unionId = openId.unionid
			this.openId = openId.openid
			this.getCouponLists()
			this.listInfo.map(function(value) {
				value.bOn = false
			})


			console.log("分享状态", uni.getStorageSync('sceneStatus'));
			let status = uni.getStorageSync('sceneStatus')
			// if(status==)
			// let $this = this
			// //判断是否由分享进入
			if (status == 1007 || status == 1008 || status == 1044 || status == 1047) {
				this.shareDisabled = false
				this.shareStatus = false
			} else {
				this.shareDisabled = true
				this.shareStatus = true
			}


		},
		methods: {
			// 分享优惠券点击
			shareClick() {
				this.shareBottom = true
			},
			// 分享优惠券到卡片
			shareToCard() {
				let a = this.selectAllCouponCode.toString()
				console.log(a)
				let data = {
					couponCodes: a,
					fromUnionId: this.unionId
				}
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))
				uni.navigateTo({
					url: '/pagesBusiness/coupon/couponUserList'
				})
			},
			// 分享优惠券到微信
			onShareAppMessage(res) {
				console.log("分享优惠券")
				// console.log(this.userInfo)
				console.log(res)
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log('来自页面内分享按钮');
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					return {
						title: `这是我分享给你的优惠券！快来领取吧！`,
						path: '/pagesBusiness/coupon/grabCoupon?do=login',
						success(res) { // 分享成功回调
							console.log(" 分享成功回调", res)
							this.$uniApi.showTips('分享成功', 'success')
						}
					}
				} else {
					// if (!this.userInfo.id) {
					// 	uni.showToast({
					// 		title: '请先创建名片',
					// 		icon: 'none'
					// 	});
					// 	return
					// }
					// return {
					// 	title: `我是${this.userInfo.company?this.userInfo.company:''}的${this.userInfo.name?this.userInfo.name:''},这是我的拜帖,敬请惠存!`,
					// 	path: '/pages/card/card?cardId=' + this.userInfo.id
					// }
				}

			},
			// 同步优惠券
			synClick() {
				this.popShow = true
			},
			// 同步优惠券提交
			synSubmit() {
				let data = {
					username: this.userInfos.name,
					password: this.userInfos.password,
					fromUnionId: this.unionId,
				}
				this.$api.synMyCoupon(this.userInfos.name, this.userInfos.password, this.unionId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.result,
							icon: 'none'
						});
						this.popShow = false
						this.getCouponLists()
					} else {
						this.popShow = true
						this.userInfos.name = ''
						this.userInfos.password = ''
						uni.showToast({
							title: "信息输入错误，请重新输入！",
							icon: 'none'
						});
					}
				})
			},

			// 状态切换点击
			statusMenuClick(item) {
				console.log(item)
				this.typeValue = item.id
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						this.shareDisabled = true
						this.shareShow = false
					} else {
						// 已使用和已过期都不能分享
						this.shareDisabled = false
						this.shareShow = false
					}
					this.getCouponLists()
				} else {
					this.shareDisabled = false
					this.shareShow = false
					this.getCouponLists()
				}

			},
			getCouponLists() {
				let data = {
					useState: this.typeValue,
					unionId: this.unionId
				}
				this.$api.getCouponList(data).then(res => {
					console.log(res)
					if (res.success) {
						this.listInfo = res.result.records
					}
				})
			},
			toShare(item, index) {
				console.log(item)
				this.shareBottom = true
				let data = {
					couponCodes: item.couponCode,
					fromUnionId: this.unionId
				}
				uni.setStorageSync('couponUserListsInfo', JSON.stringify(data))

			},
			// 去使用
			toUse(item, index) {
				console.log("去使用")
			},

			// 单选多选
			checkCoupon(index, item) {
				if (this.shareStatus) {
					if (this.typeValue == 1) {
						// 如果是未使用
						const temp = this.listInfo[index]
						temp.bOn = !this.listInfo[index].bOn
						this.$set(this.listInfo, index, temp)
						console.log(this.listInfo)
						this.selectAllCouponCode = []
						this.listInfo.forEach(item => {
							if (item.bOn) {
								this.selectAllCouponCode.push(item.couponCode)
							}
						})
						console.log(this.selectAllCouponCode)
						if (this.selectAllCouponCode.length == 0) {
							this.shareShow = false
						} else {
							this.shareShow = true
						}
					} else {
						// 已使用和已过期都不能分享
						this.shareShow = false
						this.toUse = false


					}
				} else {
					console.log("分享页进入 禁止分享")
				}


			},

			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			shareClose() {
				this.shareBottom = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-box {
		background-color: #F8F9FF;
		padding: 0 30upx 20upx;
		position: relative;

		.share-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			line-height: 120upx;
			text-align: center;
			background: linear-gradient(90deg, #ff9c11 0%, #ff2819 100%);
			// box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 300upx;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;
			font-size: 24upx;
		}

		.add-cicle {
			position: fixed;
			width: 120upx;
			height: 120upx;
			line-height: 120upx;
			text-align: center;
			background: linear-gradient(90deg, #4538ff 0%, #79a8ff 100%);
			// box-shadow: 0upx 3upx 20upx 0upx rgba(65, 59, 243, 0.5000);
			border-radius: 50%;
			right: 30upx;
			bottom: 150upx;
			z-index: 10;
			letter-spacing: 5upx;
			color: white;
			font-weight: bold;

			text {
				// width: 50upx;
				// height: 50upx;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translateX(-25upx) translateY(-25upx);
			}
		}

		// 优惠券列表
		.coupon-list {

			// .coupon-active{
			// 	color: red;
			// }
			// 单个优惠券box
			.list-box {
				// display: flex;
				position: relative;
				// width: 700upx;
				// height: 300upx;
				border-radius: 20upx;
				background: #FFFFFF;
				box-shadow: 5px 5px 3px #888888;
				border: 1px solid rgba(0, 0, 0, 0.1);
				margin: 40upx auto;

				.coupon-pick {
					position: absolute;
					top: 10upx;
					right: 15upx;
				}
			}

			// 优惠券左上角显示的背景图
			.list-left-top {
				position: absolute;
				top: 10upx;
				left: -15upx;
				width: 180upx;
				height: 50upx;
				text-align: center;
				line-height: 50upx;
				font-size: 24upx;
				color: white;
				letter-spacing: 5upx;
				background: linear-gradient(90deg, #ff9c11 0%, #ff2819 100%);
				transform: rotateZ(-30deg);
			}

			// 优惠券顶部
			.list-top {
				// background: forestgreen;
				width: 80%;
				margin: 0 auto;
				height: 100upx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
				margin-top: 100upx;

				.list-top-left {
					.list-name {
						font-size: 32upx;
						font-weight: bold;
					}

					.list-date {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
						margin-top: 10upx;
					}
				}

				.list-top-right {
					text-align: center;
					position: relative;
					top: -38upx;

					.list-money {
						font-size: 32upx;
						font-weight: bold;
						position: relative;
						top: 10upx;
						color: #ff2819;

						text {
							font-size: 60upx;
							vertical-align: end;
							padding-left: 10upx;
						}
					}

					.list-condition {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
						margin-top: 10upx;
					}
				}
			}

			// 优惠券底部
			.list-btm {
				display: flex;
				justify-content: space-between;
				width: 80%;
				margin: 0 auto;
				padding: 20upx 0;

				.list-explain {

					// width: 300upx;
					::v-deep .u-cell {
						width: 205upx;
					}

					::v-deep .u-cell__title-text {
						font-size: 26upx;
						font-weight: 400;
						color: #5b5b5b;
					}

					::v-deep .u-line {
						border-bottom-width: 0 !important;
						border-bottom-style: none !important;
					}

					::v-deep .u-cell__body {
						padding: 0 !important;
					}

					::v-deep .u-cell__body__content {
						flex: none !important;
					}

					::v-deep .u-collapse-item__content__text {
						padding: 20upx 20upx 20upx 0 !important;
						font-size: 24upx;

					}
				}

				.list-share {}
			}
		}

		// 弹出框
		.pop-box {
			padding: 50upx;

			.pop-submit {
				display: flex;
				justify-content: space-around;
				margin-top: 20upx;

				.pop-confirm {
					width: 200upx;
				}

				.pop-cancle {
					width: 200upx;
					margin-left: 20upx;
				}
			}
		}

		// 分享弹出框
		.share-bottom {
			padding: 50upx;
			display: flex;
			justify-content: space-around;

			.share-bottom-box {
				.share-bottom-wrap {
					// background: red;
					text-align: center;

					.share-bottom-img-box {
						background: red;
						width: 80upx;
						height: 80upx;
						text-align: center;
						border-radius: 50%;
						position: relative;

						// background: red;
						img {
							width: 50upx;
							height: 50upx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translateX(-25upx) translateY(-25upx);
						}
					}

					.share-bottom-text {
						font-size: 26upx;
						// margin-top: 10upx;
						font-weight: 600;
						line-height: 50upx;
						font-size: #5d5d5d;

						.shareBtn {
							padding: 0;
							font-size: 26upx;
							font-weight: 600;
							font-size: #5d5d5d;
							line-height: 50upx;
							border-radius: 0;
							background: white;
						}

						.shareBtn::after {
							border: none !important;
						}
					}

					.share-bottom-img-box1 {
						background: #fe3030;
					}

					.share-bottom-img-box2 {
						background: #1574ef;
					}

					.share-bottom-img-box3 {
						background: rgb(0, 211, 162);
					}

				}
			}
		}

	}
</style>
